<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>pagemap demo - boxes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body id="boxes-demo" class="checkers">
    <div id="banner">
        <div><a href="https://larsjung.de/pagemap/">pagemap</a> demo</div>
        <div><a href="text.html">text</a> - <strong>boxes</strong></div>
    </div>

    <div id="container">
        <div id="content" class="checkers">
            <div id="container2">
                <div id="content2" class="checkers"></div>
            </div>
        </div>
    </div>

    <canvas id="map"></canvas>

    <script src="pagemap.min.js"></script>
    <script>
        pagemap(document.querySelector('#map'), {
            // viewport: document.querySelector('#container'),
            interval: 50,
            styles: { div: 'rgba(0,0,0,0.1)' },
            back: 'rgba(255,255,255,1)'
        });
    </script>
</body>
</html>
